<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>TabContainer Demo</title>
	
	<style type="text/css">
		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/nihilo/nihilo.css";
		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/tundra/tundra.css";
		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/resources/dnd.css";
		.source {1px dotted skyblue; height 200px; width: 300px;}
		.bluesquare { height:50px; width:100%; background-color: skyblue; }
		.redsquare { height:50px; width:100%; background-color: red; }
		.dojoDndItemOver                {background: #feb;}
		.dojoDndItemSelected    {background: #ccf; color: #444;}
		.dojoDndItemAnchor              {background: #ccf; color: black;}
		.dojoDndItemOver.dojoDndItemSelected    {background: #ec8;}
		.dojoDndItemOver.dojoDndItemAnchor              {background: #ec8;}
		.dojoDndItemBefore              {border-top:    3px solid red;}
		.dojoDndItemAfter               {border-bottom: 3px solid red;}
		.dojoDndHorizontal .dojoDndItemBefore           {border-top:    none;}
		.dojoDndHorizontal .dojoDndItemAfter            {border-bottom: none;}
		.dojoDndHorizontal .dojoDndItemBefore        {border-left:  3px solid red;}
		.dojoDndHorizontal .dojoDndItemAfter         {border-right: 3px solid red;}

	</style>    
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"
		    djConfig="parseOnLoad:true, isDebug:true"></script>
    <script>
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dijit.Tree");
        dojo.require("dojo.parser");
        dojo.require("dojo.dnd.Source");
        dojo.require("dijit._tree.dndSource");
        dojo.require("dijit.Menu");
        
       
        function poptartCheckItemAcceptance(node,source) {
            // Get the associated dojo.data item for the target
            item = dijit.getEnclosingWidget(node).item;
            // Need to check for item because when dropping on a root node,
            // item === null
            if (! item) return false;
           
            ptType = ptTree.store.getValue(item,"type");
           
            if (ptType == 'category') {
                // We make intelligent guesses about the correct folder
                re = new RegExp(ptTree.store.getValue(item,"regexp"));
                okToMove = true;
                for (var itemId in source.selection) {
                   console.debug(itemId+" tested against "+re.toString());
                   okToMove &= re.test(itemId);
                }
               return okToMove;
            }
            else
                return false;
        }
   </script>
   
</head>
<body class="nihilo">

<!-- Our left-click menu for the tree. -->
<ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
	<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Edit</li>
	<li dojoType="dijit.MenuItem" disabled="true">Delete</li>

	<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
		onClick="alert('not actually cutting anything, just a test!')">Cut</li>
	<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
		onClick="alert('not actually copying anything, just a test!')">Copy</li>
	<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
		onClick="alert('not actually pasting anything, just a test!')">Paste</li>
	<li dojoType="dijit.PopupMenuItem">
		<span>Add "Sibling"</span>
		<ul dojoType="dijit.Menu" id="submenu2">
			<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">ABOVE this item</li>

			<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">BELOW this item</li>
		</ul>
	</li>
	<li dojoType="dijit.PopupMenuItem" disabled="true">
		<span>Add "Child"</span>
	</li>
</ul>

        <div>Drag a Pop Tart to Its Category</div>
        <div dojoType="dojo.dnd.Source">
           <div class="dojoDndItem" id="Hot Chocolate">Hot Chocolate</div>
           <div class="dojoDndItem" id="Blueberry">Blueberry</div>
        </div>
        
        <div dojoType="dojo.data.ItemFileWriteStore"
             url="treedata.txt" jsid="popStore" />
        
        <div dojoType="dijit.Tree" store="popStore" labelAttr="name"
             label="Pop Tarts" jsid="ptTree"
             dndController="dijit._tree.dndSource"
             checkItemAcceptance="poptartCheckItemAcceptance">
      		<script type="dojo/connect">
				var menu = dijit.byId("tree_menu");
				// when we right-click anywhere on the tree, make sure we open the menu
				menu.bindDomNode(this.domNode);

				dojo.connect(menu, "_openMyself", this, function(e){
					// get a hold of, and log out, the tree node that was the source of this open event
					var tn = dijit.getEnclosingWidget(e.target);
					console.debug(tn);
				
					// now inspect the data store item that backs the tree node:
					console.debug(tn.item);
				
					// contrived condition: if this tree node doesn't have any children, disable all of the menu items
					menu.getChildren().forEach(function(i){ i.attr('disabled', tn.item.root); });

					// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
				});
			</script>
		</div>
		
		<div dojoType="dojo.dnd.Source" horizontal="true" jsId="c1" class="source dojoDndHorizontal dojoDndSource dojoDndTarget">
			<span class="dojoDndItem bluesquare" dndType="blue">
				BLUE
			</span>
			<span class="dojoDndItem redsquare" dndType="red">
				RED
			</span>
			<span class="dojoDndItem bluesquare" dndType="blue">
				BLUE
			</span>
			<span class="dojoDndItem redsquare" dndType="red">
				RED
			</span>
		</div>
		
		<div dojoType="dojo.dnd.Target" jsId="c2" class="target" accept="blue,darkred,red">
			TARGET
		</div>
</body>
</html>